<template>
    <div class="map-container">
        <!-- 控制面板 -->
        <el-card class="control-panel">
          <div class="draw-controls">
            <el-button-group>
              <el-button size="mini"  type="danger" @click="startDrawing">绘制火场</el-button>
              <el-button size="mini" type="danger" @click="startSimulation">开始模拟</el-button>
              <el-button size="mini"  @click="stopSimulation">停止</el-button>
            </el-button-group>
          </div>
            <div class="param-group">
            <h3>火势参数</h3>
            <div class="slider-container">
            <span>基础速度：{{ models.spreadSpeed }} m/s</span>
            <el-slider v-model="models.spreadSpeed" :min="1" :max="20"></el-slider>
            </div>
            
            <div class="slider-container">
            <span>可燃物密度：{{ models.combustibleDensity }}%</span>
            <el-slider v-model="models.combustibleDensity" :min="0" :max="100"></el-slider>
            </div>
        </div>

        <div class="param-group">
            <h3>气象参数</h3>
            <div class="slider-container">
            <span>风速：{{ models.windSpeed }} m/s</span>
            <el-slider v-model="models.windSpeed" :min="0" :max="30"></el-slider>
            </div>
            
            <div class="slider-container">
            <span>风向：{{ models.windDirection }}°</span>
            <el-slider 
                v-model="models.windDirection" 
                :min="0" 
                :max="360"
                :step="5"
            ></el-slider>
            </div>
            
            <div class="slider-container">
            <span>空气湿度：{{ models.humidity }}%</span>
            <el-slider v-model="models.humidity" :min="0" :max="100"></el-slider>
            </div>
        </div>
        </el-card>

    <!-- 火情信息对话框 -->
    <el-dialog title="火情详情" :visible.sync="models.dialogVisible">
      <div class="fire-info">
        <p>🔥 火点坐标：{{ models.selectedFireInfo.coordinate }}</p>
        <p>📏 扩散范围：{{ models.selectedFireInfo.radius.toFixed(1) }} 米</p>
        <p>🌡️ 当前温度：{{ models.selectedFireInfo.temperature.toFixed(1) }}℃</p>
        <p>💨 影响风速：{{ models.windSpeed }}m/s ({{ windDirectionText }})</p>
      </div>
    </el-dialog>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Emit,Prop } from 'vue-property-decorator';

interface FireSource {
  coordinate: number[];
  radius: number;
  temperature: number;
}

@Component
export default class FireSimulation extends Vue {

   @Prop() models;

  // 计算属性：将风向角度转换为方位文字
  get windDirectionText() {
    const directions = ['北', '东北', '东', '东南', '南', '西南', '西', '西北'];
    const index = Math.round((this.models.windDirection % 360) / 45) % 8;
    return directions[index];
  }

    mounted() {
        this.updateFireDisplay();
    }

  // 创建火源对象
  @Emit('startDrawing')
  startDrawing(type){
        this.models.isDrawing = true;
        this.$message.success("开始绘制洪水模型");
        return type;
    }


    @Emit("updateFireDisplay")
    updateFireDisplay() {
        console.log("112")
    }

    // 停止模拟
    @Emit('stopSimulation')
    private stopSimulation() {
        if (this.models.simulationTimer) {
            clearInterval(this.models.simulationTimer);
            this.models.simulationTimer = null;
        }
    }

     // 计算风向影响系数
  private get windDirectionRad() {
    return (this.models.windDirection * Math.PI) / 180;
  }

    // 火势扩散逻辑
    // 火势扩散算法
  private spreadFire() {
    this.models.fireSources = this.models.fireSources.map(fire => {
      // 计算环境影响因素
      const windEffect = this.calculateWindEffect(fire);
      const humidityEffect = 1 - (this.models.humidity / 100);
      const densityEffect = this.models.combustibleDensity / 100;

      // 计算新半径
      const baseGrowth = this.models.spreadSpeed * 2;
      const newRadius = fire.radius + baseGrowth * windEffect * humidityEffect * densityEffect;

      // 计算新坐标（受风向影响）
      const newCoordinate = [
        fire.coordinate[0] + windEffect * Math.cos(this.windDirectionRad),
        fire.coordinate[1] + windEffect * Math.sin(this.windDirectionRad)
      ];

      // 计算温度变化
      const newTemp = fire.temperature + 
        (this.models.combustibleDensity * 0.5) -
        (this.models.humidity * 0.3);

      return {
        coordinate: newCoordinate,
        radius: newRadius,
        temperature: Math.max(300, Math.min(newTemp, 1000))
      };
    });
  }

  private calculateWindEffect(fire: FireSource): number {
    const baseWind = this.models.windSpeed * 0.1;
    // 火势温度对风速的放大效应
    const tempEffect = 1 + (fire.temperature - 300) / 700;
    return baseWind * tempEffect;
  }

    beforeDestroy() {
        this.stopSimulation();

    }
}
</script>

<style scoped>
.map-container {
    position: relative;
    width: 100%;
    height: 100vh;
}

.map {
    width: 100%;
    height: 100%;
}

.draw-controls {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.control-panel {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 300px;
    z-index: 1000;
}

.slider-container {
    margin-top: 20px;
    padding: 0 20px;
}
</style>